<template>
    <div class="container">
        <el-tabs v-model="message"  @tab-click="handleClick">
            <el-tab-pane label="异步A" name="first">
                <template v-if="message == 'first'">
                    <AsyncCompA></AsyncCompA>
                </template>
            </el-tab-pane>
            <el-tab-pane label="异步B" name="second">
                <template v-if="message == 'second'">
                    <AsyncCompB></AsyncCompB>
                </template>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script setup lang="ts" name="tabs">

    import { ref, reactive } from 'vue';
    import { defineAsyncComponent } from 'vue'
    import { useRouter ,useRoute} from 'vue-router';
    import LoadingComponent from "./components/Loading.vue"
    import ErrorComponent from "./components/Error.vue"
    import { TabsPaneContext } from 'element-plus';
    const obj = defineProps(['a','b','c']) // 路由参数变成了props也可以传入组件内部  需要配合路由的props 一起使用
    const message = ref('first');

    const router = useRouter();
    const route = useRoute();

    console.log(route)
    console.log(obj)

    const AsyncCompA = defineAsyncComponent({
        // 加载函数
        loader: () => import('./components/AsyncA.vue'),
        // 加载异步组件时使用的组件
        loadingComponent: LoadingComponent,
        // 展示加载组件前的延迟时间，默认为 200ms
        delay: 200,
        // 加载失败后展示的组件
        errorComponent: ErrorComponent,
        // 如果提供了一个 timeout 时间限制，并超时了
        // 也会显示这里配置的报错组件，默认值是：Infinity
        timeout: 3000
    })

    const AsyncCompB = defineAsyncComponent({
        // 加载函数
        loader: () => import('./components/AsyncB.vue'),
        // 加载异步组件时使用的组件
        loadingComponent: LoadingComponent,
        // 展示加载组件前的延迟时间，默认为 200ms
        delay: 200,
        // 加载失败后展示的组件
        errorComponent: ErrorComponent,
        // 如果提供了一个 timeout 时间限制，并超时了
        // 也会显示这里配置的报错组件，默认值是：Infinity
        timeout: 3000
    })

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab)
        console.log(event)
        console.log(message.value)
    }

</script>

<style>
    .message-title {
        cursor: pointer;
    }
    .handle-row {
        margin-top: 30px;
    }
</style>
